<template>
   <li @mouseenter="mouseHandler(true)" @mouseleave="mouseHandler(false)" :style="{backgroundColor:bgcolor,color:mycolor}">
          <label>
            <!-- 不直接写v-model=todo.isCompleted是因为尽量不要子级组件直接修改父级属性，而是传过来一种方法，子级调用就修改，不调用就不修改 -->
            <input type="checkbox" v-model="isComptete"/>
            <span>{{todo.title}}</span>
          </label>
          <button class="btn btn-danger" v-show="isShow"  @click="delTodo">删除</button>
   </li>
</template>

<script lang="ts">
import {defineComponent,ref,computed} from 'vue'
import {Todo} from '../types/todo'
export default defineComponent({
  name:"item",
  props:{
    todo:{
      type:Object as  ()=> Todo ,//函数返回的是Todo类型,强制把Object类型转换为Todo类型
      required:true
    },
    deleteTodo:{
      type:Function,
      required:true
    },
    index:{
      type:Number,
      required:true
    },
    updateTodo:{
      type:Function,
      required:true
    }
  },
  setup(props) {
    const bgcolor = ref('bgcolor')
    const mycolor = ref('mycolor')
    const isShow = ref(false)

    const mouseHandler=(flag:boolean)=>{
      if(flag){
        //鼠标进入时
        bgcolor.value='pink'
        mycolor.value='green'
        isShow.value=true
      }else{
        //鼠标移出时
        bgcolor.value='white'
        mycolor.value='black'
        isShow.value=false
      }
    }

    //删除数据的方法
    const delTodo =()=>{
      if(window.confirm('确定要删除吗？')){
         props.deleteTodo(props.index)
      }
    }

    //计算属性的方式来让当前的复选框选中或不选中
    const isComptete =computed({
      get(){
        return props.todo.isCompleted
      },
      set(val){
        props.updateTodo(props.todo,val)
         
      }
    })
     
    return {
      mouseHandler,
      bgcolor,
      mycolor,
      isShow,
      delTodo,
      isComptete
          }
  }
})
</script>

<style scoped>
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}
li label {
  float: left;
  cursor: pointer;
}
li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}
li button {
  float: right;
  /* display: none; */
  margin-top: 3px;
}
li:before {
  content: initial;
}
li:last-child {
  border-bottom: none;
}
</style>
